import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 1000
    title: qsTr("基本控件示例")

    ColumnLayout {
        anchors.centerIn: parent
        anchors.margins: 20
        spacing: 20

        GroupBox {
            title: "按钮"
            Layout.fillWidth: true

            RowLayout {
                Button {
                    text: "普通按钮"
                    onClicked: console.log("普通按钮被点击")
                }

                Button {
                    text: checked ? "已选中" : "未选中"
                    checkable: true
                    onClicked: console.log("切换按钮状态为: " + checked)
                }

            }

        }

        GroupBox {
            title: "单选按钮"
            Layout.fillWidth: true

            RowLayout {
                RadioButton {
                    text: "选项 1"
                    checked: true
                    onClicked: console.log("选择了 选项 1")
                }

                RadioButton {
                    text: "选项 2"
                    onClicked: console.log("选择了 选项 2")
                }

                RadioButton {
                    text: "选项 3"
                    onClicked: console.log("选择了 选项 3")
                }

            }

        }

        // 复选框
        GroupBox {
            title: "复选框"
            Layout.fillWidth: true

            RowLayout {
                CheckBox {
                    text: "选项 A"
                    onCheckedChanged: console.log("选项 A 状态: " + checked)
                }

                CheckBox {
                    text: "选项 B"
                    onCheckedChanged: console.log("选项 B 状态: " + checked)
                }

                CheckBox {
                    text: "选项 C"
                    onCheckedChanged: console.log("选项 C 状态: " + checked)
                }

            }

        }

        // 文本框
        GroupBox {
            title: "文本框"
            Layout.fillWidth: true

            ColumnLayout {
                TextField {
                    placeholderText: "单行文本框..."
                    Layout.fillWidth: true
                    onTextChanged: console.log("输入：" + text)
                }

                TextArea {
                    placeholderText: "多行文本框..."
                    Layout.fillWidth: true
                    Layout.preferredHeight: 100
                    wrapMode: TextEdit.Wrap
                    onTextChanged: console.log("输入：" + text)
                }

            }

        }

        // 标签
        GroupBox {
            
            title: "标签"
            Layout.fillWidth: true

            ColumnLayout {
                Label {
                    text: "这是一个普通标签"
                    Layout.fillWidth: true
                }

                Label {
                    text: "这是一个加粗标签"
                    font.bold: true
                    Layout.fillWidth: true
                }

                Label {
                    text: "这是一个斜体标签"
                    font.italic: true
                    Layout.fillWidth: true
                    color: "red"
                }
                Label { 
                    text: "<a href='https://qt.io'>链接标签</a>"
                    onLinkActivated: Qt.openUrlExternally(link)
                }
            }
        }


        // 列表和下拉框
        GroupBox {
            title: "列表"
            Layout.fillWidth: true
            Layout.fillHeight: true

            ColumnLayout {
                ColumnLayout {
                    Layout.fillWidth: true

                    ComboBox {
                        id: comboBox
                        model: ["选项 1", "选项 2", "选项 3"]
                        delegate: ItemDelegate {
                            text: modelData
                            width: ListView.view.width
                            onClicked: console.log("选择了: " + modelData)
                        }
                        
                    }
                }
            }
        }

        // 状态显示
        Label {
            id: statusLabel
            Layout.fillWidth: true
            text: statusText
            padding: 10
            background: Rectangle {
                color: "#f0f0f0"
                radius: 5
                border.color: '#5f1b1b'
            }
        }

    }

    property string statusText: "欢迎使用基本控件示例！111"

}
